<template>
    <div class="module">
        <!--<el-tabs v-model="filterData.outTime" @tab-click="handleClick" stretch class="tab_check_bill">-->
            <!--<el-tab-pane name="0">-->
                <!--&lt;!&ndash;this.billTips.billNotOutTimeCount <MarkRemind :tipsNum="this.billAdminTem.fBankFailedCount" class="bid_tips"></MarkRemind>&ndash;&gt;-->
                <!--<span slot="label"> <i>{{aaa.a}}</i></span>-->
            <!--</el-tab-pane>-->
            <!--<el-tab-pane name="1">-->
                <!--<span slot="label">逾期票据<MarkRemind :tipsNum="this.billTips.billOutTimeCount" class="bid_tips"></MarkRemind></span>-->
            <!--</el-tab-pane>-->
        <!--</el-tabs>-->
        <el-menu :default-active="filterData.outTime" mode="horizontal" class="tab_menu_check_bill">
            <el-menu-item index="0" @click="handleClick('0')">正常票据<MarkRemind :tipsNum="this.billTips.billNotOutTimeCount" class="bid_tips"></MarkRemind></el-menu-item>
            <el-menu-item index="1" @click="handleClick('1')">逾期票据<MarkRemind :tipsNum="this.billTips.billOutTimeCount" class="bid_tips"></MarkRemind></el-menu-item>
        </el-menu>
        <el-row>
            <el-col :span="24" class="check_bill_int">
                <!--@input="intContent()"-->
                <el-input placeholder="企业名称/联系人/联系方式/关联中介/渠道代理/邀请人/票据号" v-model="filterData.searchParam" clearable @clear="inputChoose()"></el-input>
                <el-button type="primary" size="small" @click="inputChoose()">搜索</el-button>
            </el-col>
            <el-col :span="24">
                <FiltrateTemplate
                    :templateSource="this.filterSource"
                    @changeSourceFun="changeSourceFun"
                    @changeAcceptFun="changeAcceptFun"
                    @changePriceFun="changePriceFun"
                    @changePriceConfirmFun="changePriceConfirmFun"
                    @changePriceClearFun="changePriceClearFun"
                    @changeTimeFun="changeTimeFun"
                    @changeTimeComfirmFun="changeTimeComfirmFun"
                    @changeTimeClearFun="changeTimeClearFun"
                    @changeFlawFun="changeFlawFun"
                    @clearAllChooseFun="clearAllChooseFun"
                    @closeTagFun="closeTagFun"
                    ref="filterTem"
                >
                </FiltrateTemplate>
            </el-col>
        </el-row>
        <!--<el-tabs v-model="filterData.checkStatus" @tab-click="handleClick2" stretch class="tab_check_bill">-->
            <!--<el-tab-pane label="全部" name="all"></el-tab-pane>-->
            <!--<el-tab-pane name="1">-->
                <!--<span v-if="filterData.outTime == '0'" slot="label">待审核<MarkRemind :tipsNum="this.billTips.billNotOutTimeCount" class="bid_tips"></MarkRemind></span>-->
                <!--<span v-if="filterData.outTime == '1'" slot="label">待审核<MarkRemind :tipsNum="this.billTips.billOutTimeCount" class="bid_tips"></MarkRemind></span>-->
            <!--</el-tab-pane>-->
            <!--<el-tab-pane label="已审核" name="2"></el-tab-pane>-->
        <!--</el-tabs>-->
        <el-menu :default-active="filterData.checkStatus" mode="horizontal" class="tab_menu_check_bill">
            <el-menu-item index="all" @click="handleClick2('all')">全部</el-menu-item>
            <el-menu-item index="1" @click="handleClick2('1')">待审核
                <MarkRemind :tipsNum="this.billTips.billNotOutTimeCount" class="bid_tips" v-if="filterData.outTime == '0'"></MarkRemind>
                <MarkRemind :tipsNum="this.billTips.billOutTimeCount" class="bid_tips" v-if="filterData.outTime == '1'"></MarkRemind>
            </el-menu-item>
            <el-menu-item index="2" @click="handleClick2('2')">已审核</el-menu-item>
        </el-menu>
        <el-table
                :data="tableData"
                stripe
                height="500"
                style="width: 100%"
                class="table_sort_style btn_margin_style"
                @sort-change='sortChangeBill'
        >
            <el-table-column prop="bill_publishing_time" label="发布时间" width="124">
                <template slot-scope="scope">
                    <span>{{scope.row.bill_publishing_time_Y}}</span><br/><span>{{scope.row.bill_publishing_time_H}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="bill_style_name" label="票据来源"> </el-table-column>
            <el-table-column prop="drawer_name" label="出票企业"> </el-table-column>
            <el-table-column label="是否首单">
                <template slot-scope="scope">
                    <span :class="{'tableRed':scope.row.firstOrder == '是'}">
                        {{scope.row.firstOrder}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="contact_name" label="联系人"> </el-table-column>
            <el-table-column prop="contact_phone" label="联系方式" width="110"> </el-table-column>
            <el-table-column prop="bill_acceptor_name" label="承兑人"> </el-table-column>
            <el-table-column prop="bill_sum_price" label="票面金额(万元)" sortable width="143"> </el-table-column>
            <el-table-column prop="bill_deadline_time" label="到期时间" sortable width="124">
                <template slot-scope="scope">
                    <span>{{scope.row.bill_deadline_time_Y}}</span><br/><span>{{scope.row.bill_deadline_time_T}}</span>
                </template>
            </el-table-column>
            <el-table-column label="背书瑕疵">
                <template slot-scope="scope">
                    <div :class="{'tableRed':scope.row.bill_flaw_ids != '1500'}">
                        {{ formatterFlaw(scope.row.bill_flaw_names.join(',')) }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="每十万扣款">
                <template slot-scope="scope">
                    <span class="tableRed" v-if="scope.row.every_plus_interest != '' && scope.row.every_plus_interest != undefined && scope.row.every_plus_interest != null">{{scope.row.bill_bidding_model_name == '一口价' ? '一口价':'竞价'}}<br />{{scope.row.every_plus_interest}}元</span>
                    <span class="tableRed" v-if="(scope.row.every_plus_interest == '' || scope.row.every_plus_interest == undefined || scope.row.every_plus_interest == null) && (scope.row.bill_bidding_model_name != '' && scope.row.bill_bidding_model_name != undefined && scope.row.bill_bidding_model_name != null)">竞价</span>
                    <span v-if="scope.row.bill_bidding_model_name == '' || scope.row.bill_bidding_model_name == null || scope.row.bill_bidding_model_name == undefined && (scope.row.every_plus_interest == '' || scope.row.every_plus_interest == undefined || scope.row.every_plus_interest == null)">--</span>
                </template>
            </el-table-column>
            <el-table-column prop="bill_status_name" label="票据状态"> </el-table-column>
            <el-table-column prop="bill_is_checked_name" label="审核状态"> </el-table-column>
            <el-table-column label="审核时间" width="124">
                <template slot-scope="scope">
                    <span>{{scope.row.bill_check_time_Y}}</span><br/><span>{{scope.row.bill_check_time_H}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="bill_check_name" label="审核人"> </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="editBillBtn(scope.row)" v-if="(scope.row.bill_is_checked == 1 && (scope.row.bill_bidding_num <= 0 || scope.row.bill_bidding_num == undefined)) && scope.row.bill_status_code < 804"><i class="iconfont icon-xiugai icon_edit_style"></i> 修改</el-button>
                    <el-button type="text" size="small" @click="billDetail(scope.row)"><i class="iconfont icon-xiangqing icon_edit_style"></i> 详细</el-button>
                    <el-button size="small" @click="billCheck(scope.row)" v-if="scope.row.bill_is_checked == 0 && scope.row.bill_status_code < 804" class="check_btn_style">审核</el-button>
                    <el-button size="small" @click="anewBillCheck(scope.row)" v-if="(scope.row.bill_is_checked == -1 || (scope.row.bill_is_checked == 1 && scope.row.bill_product_id == '')) && scope.row.bill_status_code < 804" class="check_btn_style">重新审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <!-- 票据审核弹窗 -->
        <EditBill
            ref="billCheckDialog"
            :form="this.form"
            @formCheck="confirmCheck"
            @closeDialog="closeDialog"
            :isCheckSave="this.isCheckSave"
            ></EditBill>
        <!-- 票据详情弹窗 -->
        <DialogContent ref="billDetailDialog" title="票据详情">
            <BillDetail :billModel="this.billModel" @closeDialog="closeDialog"></BillDetail>
        </DialogContent>
        <!-- 票据涂抹 -->
        <!--<DialogContent ref="imagePaintDialog" title="票据涂抹">-->
            <!--<ImagePaint :image="this.paintImage" @intImg="paintData" @closeDialog="closeDialog" width=962 height=673></ImagePaint>-->
        <!--</DialogContent>-->
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import DialogContent from '@common/DialogContent.vue';
    import BillDetail from '@common/BillDetail.vue';
    import EditBill from '@common/EditBill.vue';
    import FiltrateTemplate from '@common/FiltrateTemplate.vue';
    import Pagination from "@/types/Pagination";
    import moment from 'moment';
    import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
    import MarkRemind from '@component/common/MarkRemind.vue';
    import ImagePaint from '@component/common/ImagePaint.vue';
    import { ellipsis } from '@/util/format'
    import _ from 'lodash';
    import calc from 'calculatorjs'
    @Component({
        components: {
            DialogContent,
            BillDetail,
            EditBill,
            FiltrateTemplate,
            MarkRemind,
            ImagePaint
        },
        extends: Pagination,
        computed: {
            ...mapState([
                'allTips',
                'billTips',
                'tipState'
            ])
        },
        methods: {
            ...mapActions([
                'getAllTips',
                'getBillTips'
            ]),
            ...mapMutations([
                'setTipState'
            ])
        }
    })
    export default class BillCheck extends Vue {
        filterSource: string = 'billCheck';
        tableData = []
        acceptorTypeArr = [''];
        billModel: any = {};
        billId: string|number = '';
        isClickDetail: boolean = false;
        isCheckSave: string = '';
        orderBy: string = '';
        form = {
            // bill_number: '',
            // bill_sum_price: '',
            // acceptor_cnaps: '',
            // acceptor_name: '',
            // bill_flaw_ids: [],
            // flaw_append: '',
            // acceptor_type_id: '',
            // bidding_mode: '',
            // trade_appoint_day: 0
        }
        billAdminTem: any = {}
        filterData = {
            outTime: '0',
            checkStatus: 'all',
            checkedStatus: '',
            searchParam: ''
        }
        filterModel = {
            billSource: '',
            acceptorType: '',
            billPrice: '',
            trem_billPrice: {
                minPrice: '',
                maxPrice: ''
            },
            deadTime: '',
            trem_deadTime: {
                minTime: '',
                maxTime: ''
            },
            flaw: ''
        }
        handleClick(outTime:string) {
            this.filterData.outTime = outTime;
            this.pagination.currentPage = 1
            let bill_obj = {
                timeStyle: Number(this.filterData.outTime) + 1
            }
            let tipState = _.assign(this.tipState, bill_obj)
            this.setTipState(tipState);
            this.getBillTips();
            this.getBillList();
        }
        handleClick2 (checkStatus: string) {
            this.filterData.checkStatus = checkStatus;
            this.pagination.currentPage = 1
            if(this.filterData.checkStatus == 'all'){
                this.filterData.checkedStatus = '';
            }else {
                this.filterData.checkedStatus = this.filterData.checkStatus;
            }
            this.getBillList();
        }
        filterCondition = {
            billSource: '',
            //承兑机构
            acceptType: '',
            // 票面金额
            billPrice: { min: '', max: '', gtoe: false, ltoe: false },
            // 到期天数
            expiresDays: { min: '', max: '', gtoe: false, ltoe: false },
            //背书瑕疵
            flaw: '',
        }
        filterFunction (filterForm: any) {
            this.pagination.currentPage = 1
            this.filterModel = filterForm.filterModel;
            this.filterCondition = filterForm.filterCondition;
            this.getBillList();
        }
        changeSourceFun (data) {
            let bill_obj = {
                billStyleId: data.filterModel.billSource
            }
            let tipState = _.assign(this.tipState, bill_obj)
            this.setTipState(tipState);
            this.getBillTips();
            this.filterFunction(data);
        }
        changeAcceptFun (data) {
            this.filterFunction(data);
        }
        changePriceFun (data) {
            this.filterFunction(data);
        }
        changePriceConfirmFun (data) {
            this.filterFunction(data);
        }
        changePriceClearFun (data) {
            this.filterFunction(data);
        }
        changeTimeFun (data) {
            this.filterFunction(data);
        }
        changeTimeComfirmFun (data) {
            this.filterFunction(data);
        }
        changeTimeClearFun (data) {
            this.filterFunction(data);
        }
        changeFlawFun (data) {
            this.filterFunction(data);
        }
        clearAllChooseFun (data) {
            this.filterFunction(data);
        }
        closeTagFun (data) {
            this.filterFunction(data);
        }
        // 表单输入时
        intContent () {
            this.$refs.filterTem.clearAllChoose();
        }
        // 表单输入筛选
        inputChoose () {
            this.getBillList();
        }
        // 清空筛选条件
        clearAllChoose () {
            this.intContent()
            this.getBillList();
        }
        // 点击排序
        sortChangeBill (column) {
            if(column.order == 'ascending'){
                this.orderBy = '+' + column.prop
            }else {
                this.orderBy = '-' + column.prop
            }
            this.getBillList()
        }
        async getBillList () {
            let sendPrice: string = ''
            let sendDays: string = ''
            if(this.filterCondition.billPrice.min == '' && this.filterCondition.billPrice.max == ''){
                sendPrice = ''
            } else {
                if(this.filterCondition.billPrice.max == '+∞'){
                    this.filterCondition.billPrice.max = '';
                }
                sendPrice = this.filterCondition.billPrice.min + ',' + this.filterCondition.billPrice.max;
            }
            if(this.filterCondition.expiresDays.min == '' && this.filterCondition.expiresDays.max == ''){
                sendDays = ''
            } else {
                if(this.filterCondition.expiresDays.max == '+∞'){
                    this.filterCondition.expiresDays.max = '';
                }
                sendDays = this.filterCondition.expiresDays.min + ',' + this.filterCondition.expiresDays.max;
            }
            if(this.filterData.checkedStatus == 'all'){
                this.filterData.checkedStatus = ''
            }
            let parmForm = {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                searchParam: this.filterData.searchParam,
                orderBy: this.orderBy,
                billStyleId: this.filterModel.billSource,
                acceptorTypeId: this.filterModel.acceptorType,
                billSumPrice: sendPrice,
                deadlineTime: sendDays,
                billFlawIdsExist: this.filterModel.flaw,
                billStatus: '',
                checkedStatus: this.filterData.checkedStatus,
                outTime: this.filterData.outTime
            }
            let res = await this.$http.post('bills/billProduct/getBillsByParam',parmForm)
            if(res.status == 200){
                let { items } = res.data;
                items.forEach((i) => {
                    if (i.bill_publishing_time != '' && i.bill_publishing_time != null && i.bill_publishing_time != undefined) {
                        i.bill_publishing_time_Y = moment(i.bill_publishing_time).format('YYYY-MM-DD')
                        i.bill_publishing_time_H = moment(i.bill_publishing_time).format('HH:mm:ss')
                    } else {
                        i.bill_publishing_time_Y = '--'
                    }
                    if (i.bill_check_time != '' && i.bill_check_time != null && i.bill_check_time != undefined) {
                        i.bill_check_time_Y = moment(i.bill_check_time).format('YYYY-MM-DD')
                        i.bill_check_time_H = moment(i.bill_check_time).format('HH:mm:ss')
                    } else {
                        i.bill_check_time_Y = '--'
                    }
                    i.bill_deadline_time_Y = moment(i.bill_deadline_time).format('YYYY-MM-DD')
                    i.bill_deadline_time_T = i.bill_deadline_time.substr(10, i.bill_deadline_time.length)
                    i.bill_sum_price = calc.div(i.bill_sum_price, 10000)
                })
                console.log(items)
                this.tableData = items;
                this.pagination.total = res.data.totalNum;
            }
        }
        async getBillDetail (billId:string|number, isClickDetail:boolean) {
            let res = await this.$http.get(`bills/billProduct/getBillDetails/${billId}`)
            if (res.status == 200){
                this.billModel = res.data;
                this.form = res.data;
                this.form.eleBillAccount = res.data.account_information.bank_name
                this.form.bill_deadline_time = moment(this.form.bill_deadline_time).format('YYYY-MM-DD');
                if (res.data.bill_back_files){
                    if (res.data.bill_back_files.length == 1){
                        this.billModel.bill_back_photo_path1 = res.data.bill_back_files[0].file_path;
                        this.billModel.bill_back_photo_path2 = '';
                        this.form.bill_back_photo_path1 = res.data.bill_back_files[0].file_path;
                        this.form.bill_back_photo_path2 = '';
                    }else if(res.data.bill_back_files.length == 2){
                        this.billModel.bill_back_photo_path1 = res.data.bill_back_files[0].file_path;
                        this.billModel.bill_back_photo_path2 = res.data.bill_back_files[1].file_path;
                        this.form.bill_back_photo_path1 = res.data.bill_back_files[0].file_path;
                        this.form.bill_back_photo_path2 = res.data.bill_back_files[1].file_path;
                    }
                }
                if (isClickDetail){
                    this.$refs['billDetailDialog'].openDialog();
                } else {
                    this.$refs['billCheckDialog'].openDialog();
                }
            }
        }
        // 点击审核
        billCheck (row) {
            this.isCheckSave = 'billCheck';
            this.isClickDetail = false;
            this.getBillDetail(row.bill_id,this.isClickDetail);
        }
        // 点击重新审核
        anewBillCheck (row) {
            this.isCheckSave = 'anewBillCheck';
            this.isClickDetail = false;
            this.getBillDetail(row.bill_id,this.isClickDetail);
        }
        // 点击修改
        editBillBtn (row) {
            this.isCheckSave = 'editBillBtn';
            this.isClickDetail = false;
            this.getBillDetail(row.bill_id,this.isClickDetail);
        }
        // 点击详情
        billDetail (row) {
            this.isClickDetail = true;
            this.getBillDetail(row.bill_id,this.isClickDetail);

        }
        closeDialog () {
            this.$refs['billCheckDialog'].closeDialog();
            this.$refs['billDetailDialog'].closeDialog();
        }
        // 审核
        async checkBillPost (form) {
            let res = await this.$http.post('bills/billCheck',form)
            if(res.status < 300){
                this.getBillList();
                this.getAllTips()
                this.getBillTips()
                this.$refs['billCheckDialog'].closeDialog();
                if(this.isCheckSave == 'billCheck'){
                    this.$alert('审核成功','提示',{
                        confirmButtonText: '确定',
                        customClass: 'custom-message-box',
                        callback: action => {}
                    })
                }else if(this.isCheckSave == 'editBillBtn'){
                    this.$alert('修改成功','提示',{
                        confirmButtonText: '确定',
                        customClass: 'custom-message-box',
                        callback: action => {}
                    })
                }else if(this.isCheckSave == 'anewBillCheck'){
                    this.$alert('重新审核成功','提示',{
                        confirmButtonText: '确定',
                        customClass: 'custom-message-box',
                        callback: action => {}
                    })
                }
            }
        }
        // 确认审核
        confirmCheck (data) {
            this.form.bill_deadline_time = moment(this.form.bill_deadline_time).format('YYYY-MM-DD')
            if(data.check == 1){
                if(!this.form.bill_number || this.form.bill_number.length != 30){
                    this.$alert('请输入正确票据号！','提示',{
                        confirmButtonText: '确定',
                        customClass: 'custom-message-box',
                        callback: action => {}
                    })
                    return;
                }
                if(!this.form.bill_sum_price){
                    this.$alert('请输入票面金额！','提示',{
                        confirmButtonText: '确定',
                        customClass: 'custom-message-box',
                        callback: action => {}
                    })
                    return;
                }
                if(!this.form.acceptor_cnaps){
                    this.$alert('请输入承兑行号！','提示',{
                        confirmButtonText: '确定',
                        customClass: 'custom-message-box',
                        callback: action => {}
                    })
                    return;
                }
                if(!this.form.acceptor_name){
                    this.$alert('请输入承兑人！','提示',{
                        confirmButtonText: '确定',
                        customClass: 'custom-message-box',
                        callback: action => {}
                    })
                    return;
                }
                if(!this.form.bill_deadline_time || this.form.bill_deadline_time == null){
                    this.$alert('请选择票据到期日！','提示',{
                        confirmButtonText: '确定',
                        customClass: 'custom-message-box',
                        callback: action => {}
                    })
                    return;
                }
                if(!this.form.acceptor_type_id || this.form.acceptor_type_id == 0 || this.form.acceptor_type_id == null){
                    this.$alert('请选择承兑机构！','提示',{
                        confirmButtonText: '确定',
                        customClass: 'custom-message-box',
                        callback: action => {}
                    })
                    return;
                }
            }
            if(data.check == 0 && (!this.form.check_description || this.form.check_description == null)){
                this.$alert('请输入不通过原因！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            let checkForm = {
                is_real: data.check,
                ...this.form
            }
            let text: string;
            if(this.isCheckSave == 'billCheck'){
                text = '审核';
            }else if(this.isCheckSave == 'editBillBtn'){
                text = '修改';
            }else if(this.isCheckSave == 'anewBillCheck'){
                text = '重新审核';
            }
            this.$confirm('确认' + text + data.check_text +'吗？','提醒',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                customClass: 'custom-message-box',
                center: true
            }).then(() => {
                this.checkBillPost(checkForm);
            }).catch((err) => {
                console.log(err)
            })
        }
        formatterFlaw (prop) {
            return ellipsis(prop, '...', 8)
        }
        loadDataForPagination() {
            this.getBillList()
        }
        mounted () {
            this.getBillList();
            this.getBillTips();
        }
    }
</script>
<style lang="scss">
    .tab_check_bill {
        .el-tabs__nav.is-stretch {
            min-width: 15%;
        }
    }
</style>